/*
产品库12-商品分类组件
*/
<template>
  <div>
    <el-card style="width: 250px">
      <div style="margin-bottom: 10px;line-height: 30px">
        <span>商品分类名称</span>
      </div>
      <el-input
        clearable
        placeholder="请输入商品分类名称"
        style="margin-bottom: 10px"
        v-model="filterText">
      </el-input>
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :render-after-expand="false"
        :default-expanded-keys="defaultExpanded"
        :expand-on-click-node="false"
        class="el-tree-project"
        :accordion="true"
        node-key="typeName"
        ref="tree"
        :filter-node-method="filterNode"
        highlight-current>
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }">
          <el-tooltip
            effect="dark"
            :content="data.typeName"
            placement="top"
            :enterable="false">
            <span class="tree-node-title">
              {{data.typeName}}
            </span>
          </el-tooltip>
        </span>
      </el-tree>
    </el-card>
  </div>
</template>

<script>
import {
  getGoodsType,
} from "@/api/parts/mailfree/goodstype";
export default {
  name: 'leftside',
  components:{},
  data(){
    return{
      pageSize: 1000,
      currentPage: 1,
      total: 0,
      treeData:[],
      filterText:'',
      defaultProps: {
        value:'id',
        children: 'childrenTypes',
        label: 'typeName'
      },
      defaultExpanded:[],
    }
  },
  mounted() {
    this.getProduct()
  },
  methods:{
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getProduct()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getProduct()
    },
    //点击tree树图
    handleNodeClick(data,node) {
      this.$emit('node-click',data)
    },
    //过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    //刷新
    getProduct(){
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
      }
      getGoodsType(query).then(resp=>{
        this.treeData = resp.data.records
        this.total = resp.data.total
        this.$emit('cascade-list',this.getGoodsTypeTreeData(resp.data.records))
      })
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>

<style scoped lang="scss">
.el-tree-project {
  max-height: calc(100% - 32px);
  .el-tree-node {
    .el-tree-node__content {
      &:hover {
        color: #64b0f2;
      }
      height: 40px;
      margin-bottom: 5px;
      border-radius: 5px;
      display: flex;
      .custom-tree-node {
        display: flex;
        flex: 1;
        justify-content: space-between;
        .tree-node-tool {
          flex: 0 0 46px;
        }
        .tree-node-title {
          flex: 1;
          width: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    &.is-current {
      > .el-tree-node__content {
        color: #64b0f2 !important;
        span {
          color: #64b0f2 !important;
        }
      }
    }
  }
}
</style>
